<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>弹框测试</title>
  <style type="text/css">
  #G-lightbox-mask{
      position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;opacity: 0.8;filter:alpha(opacity=0.5);z-index:1000;
      /*display: none;*/
  }
  #G-lightbox-popup{
      position:fixed;left:50%;margin-left:-300px;width:600px;height:400px;top:100px;
      z-index:1001;
      /*display:none;*/

  }

  #G-lightbox-popup .lightbox-pic-view{
      position:relative;
      border:solid 5px #fff;
      border-radius: 5px;
      overflow:hidden;
      text-align: center;
      /*background-image: url("../img/loading.gif");
      background-repeat: no-repeat;
      background-position: center center;*/
  }
    #G-lightbox-popup .lightbox-pic-view img{
      width:auto;
      height:auto;
      max-height:100%;
      max-width:100%;
      border-radius: 5px;
    }
  /*#G-lightbox-popup .lightbox-pic-view .lightbox-btn{
      position:absolute;
      top:0;
      width:40%;
      height:100%;
      z-index:1;
      cursor: pointer;
      background-color:#99CC00;
      background:url(../img/return.png) no-repeat left center;
  }
  #G-lightbox-popup .lightbox-pic-view  .lightbox-prev-btn{
      left:0;
  }
  #G-lightbox-popup .lightbox-pic-view  .lightbox-next-btn{
      right:0;
  }*/

  /*#G-lightbox-popup .lightbox-pic-view .lightbox-prev-btn-show{
      background:url("../img/prev.png") no-repeat left center;cursor: pointer;
  }
  #G-lightbox-popup .lightbox-pic-view .lightbox-next-btn-show{
      background:url("../img/next.png") no-repeat right center;cursor: pointer;
  }

  #G-lightbox-popup .lightbox-pic .lightbox-img{
      display:block;
  }*/

  .lightbox-pic-caption{
      position:relative;
      margin:0 5px;
      height:50px;
      margin-top: -55px;
      background-color: rgba(0, 0, 0, 0.42);
      color: rgba(37, 37, 37, 0.67);
      font-size:20px;
      font-weight:bold;
  }
  #G-lightbox-popup  .lightbox-pic-caption .lightbox-caption-area{

      color:#fff;
  }
    #G-lightbox-popup  .lightbox-pic-caption .lightbox-caption-area .pic-title{
      line-height:50px;
      text-align: center;
    }

  #G-lightbox-popup  .lightbox-pic-caption .lightbox-caption-area .pic-span-fangda{
    display: inline-block;
    width:20px;
    height:20px;
    background-image: url(./src/img/ic_fanda.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 25%;
    bottom: 8px;
    cursor: pointer;
  }
  #G-lightbox-popup  .lightbox-pic-caption .lightbox-caption-area .pic-span-suoxiao{
    display: inline-block;
    width:20px;
    height:20px;
    background-image: url(./src/img/ic_suoxiao.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 20%;
    bottom: 8px;
    cursor: pointer;
  }
  #G-lightbox-popup  .lightbox-pic-caption .lightbox-caption-area .pic-span-xiazai{
    display: inline-block;
    width:20px;
    height:20px;
    background-image: url(./src/img/ic_download.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 15%;
    bottom: 8px;
    cursor: pointer;
  }
  /*.lightbox-close-btn{
      position:absolute;
      width:20px;
      height:20px;
      right:5px;
      top:5px;
      z-index:2;
      cursor: pointer;
      background: url("../img/close.png") no-repeat center center;
  }*/
  #lightbox-comment{
    width:260px;
    position: fixed;
    right:10px;
    height:auto;
    min-height:80%;
    max-height: 100%;
    top:10px;
    z-index: 1001;
    background-color: #fff;
    border-radius: 5px;
    background-color: #eee;
    /*display:none;*/
  }
  #lightbox-comment .comment-div .comment-header{
    background-color: #fff;
    padding-top:20px;
    padding-bottom:5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
  }
  #lightbox-comment .comment-div .comment-header .close{
    display: inline-block;
    width:25px;
    height:25px;
    position: absolute;
    background-image: url(./src/img/ic_close.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    right: -5px;
    top: -5px;
    cursor: pointer;
  }
  #lightbox-comment .comment-div .comment-header .comment-header-title{
    margin-left:30px;
    font-size:22px;
    font-weight:bold;
  }
  #lightbox-comment .comment-div .comment-header .comment-header-detail{
    margin-left:33px;
    margin-top:10px;
    font-size:16px;
    font-weight:bold;

  }
  #lightbox-comment .comment-div .comment-header .comment-header-detail .comment-detail-span-up{
    display: inline-block;
    width:16px;
    height:16px;
    background-image: url(./src/img/ic_shousuo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-left:5px;
    vertical-align: top;
  }
  #lightbox-comment .comment-div .comment-header .comment-header-detail .span-down{
    background-image: url(./src/img/ic_zhankai.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  #lightbox-comment .comment-div .comment-header .comment-header-info{
    margin-left:33px;
    margin-top:10px;
    font-size:12px;
    font-weight:bold;
    margin-right:10px;
  }
  #lightbox-comment .comment-div .comment-header .comment-header-icon{
    margin-left:20px;
    margin-top:10px;
    font-size:12px;
    font-weight:bold;
    margin-bottom:10px;
  }
  #lightbox-comment .comment-div .comment-header .comment-header-icon .icon-comment{
    display: inline-block;
    width:20px;
    height:20px;
    background-image: url(./src/img/ic_talk.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    vertical-align: middle;
    margin-right: 5px;
  }
  #lightbox-comment .comment-div .comment-header .comment-header-icon .icon-love{
    display: inline-block;
    width:20px;
    height:20px;
    background-image: url(./src/img/ic_like.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    vertical-align: middle;
      margin-right: 5px;
  }
  #lightbox-comment .comment-div .comment-content{
    background-color:#eee;
    padding-top:20px;
    padding-right:10px;
  }
  #lightbox-comment .comment-div .comment-content .comment-one{
    margin-left:24px;
    font-size:12px;
    font-weight:bold;
    margin-bottom:5px;
  }
  #lightbox-comment .comment-div .comment-content .comment-one span{
    display: inline-block;
  }
  #lightbox-comment .comment-div .comment-content .comment-one span:first-child{
    vertical-align: top;
    color:#8B8BEF;
  }
  #lightbox-comment .comment-div .comment-content .comment-one span:last-child{
    width:188px;
  }

  #lightbox-comment .comment-div .comment-content .span-page{
    font-size:12px;
    margin-right:5px;
    display: inline-block;
    cursor: pointer;
    color:#8B8BEF;
    margin-bottom:10px;
  }
  #lightbox-comment .comment-div .comment-content .up{
    margin-left: 140px;
  }
  #lightbox-comment .comment-div .comment-content .input-div{
    padding:0 10px;
  }
  #lightbox-comment .comment-div .comment-content .btn{
    display: inline-block;
margin-left: 70%;
background-color: #6BB4DC;
padding: 5px 15px;
outline: none;
border: none;
cursor: pointer;
margin-top: 10px;
border-radius: 5px;
color: #fff;
  }
  </style>
</head>
<body>
  <div id="G-lightbox-mask">

  </div>
  <div id="G-lightbox-popup">
    <div class="lightbox-pic-view">
        <img  class="lightbox-img" src="src/img/9.jpg" >
    </div>
    <div class="lightbox-pic-caption">
        <div class="lightbox-caption-area">
          <div class="pic-title">水云间</div>
          <span class="pic-span-fangda"></span>
          <span class="pic-span-suoxiao"></span>
          <span class="pic-span-xiazai"></span>
        </div>
    </div>
  </div>
  <div id="lightbox-comment">
    <div class="comment-div">
      <div class="comment-header">
        <div class="comment-header-title">
          水云间
        </div>
        <div class="comment-header-detail">
          详情<span id="comment-detail-span" class="comment-detail-span-up"></span>
        </div>
        <div class="comment-header-info">
          这一季，我只愿，花未谢，雨未消，你未离去
        </div>
        <div class="comment-header-icon">
          <span class="icon-comment"></span><span>2</span> |
          <span class="icon-love"></span><span>2</span>
        </div>
        <span class="close"></span>
      </div>
      <div class="comment-content">
        <div class="comment-one">
          <span>雷诺：</span><span>这一季，我只愿，花未谢，雨未消，你未离去</span>
        </div>
        <div class="comment-one">
          <span>雷诺：</span><span>这一季，我只愿，花未谢，雨未消，你未离去</span>
        </div>
        <div class="comment-one">
          <span>雷诺：</span><span>这一季，我只愿，花未谢，雨未消，你未离去</span>
        </div>
        <span class="span-page up">上一页</span><span class="span-page down">下一页</span>
        <div class="input-div">
          <textarea cols="31" rows="5" style="border-radius:5px"></textarea>
        </div>
        <button class="btn">发表</button>
      </div>
    </div>
  </div>
</body>
</html>
